<template>
    <el-upload v-model:file-list="props.fileList" :action="uploadUrl" :on-success="success" list-type="picture-card"
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload>
    <el-dialog v-model="dialogVisible">
        <img style="width:100%" :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { uploadUrl, host } from '@/utils/api/product.js'
const emit = defineEmits(['sendImgUrl'])

const props = defineProps(['fileList'])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const success = (response, uploadFile, uploadFiles) => {
    let url = host + '/' + response.url.slice(7)
    emit('sendImgUrl', url)

}

const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}
const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile,uploadFiles,'uploadFiles');

}








</script>
<style lang="scss" scoped></style>